<template>
  <div id="app">
    <div class="bakcground">
      <van-notice-bar class="notice-bar" left-icon="volume-o" :scrollable="false">
        <van-swipe
          vertical
          class="notice"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item>
            <div style="display: inline;color: #F6E4E1;">张**成功邀请2人,获得12.8元红包</div>
          </van-swipe-item>
          <van-swipe-item>
            <div style="display: inline;color: #F6E4E1;">刘*成功邀请1人,获得10.8元红包</div>
          </van-swipe-item>
          <van-swipe-item>
            <div style="display: inline;color: #F6E4E1;">张**成功邀请5人,获得20.8元红包</div>
          </van-swipe-item>
          <van-swipe-item>
            <div style="display: inline;color: #F6E4E1;">李**成功邀请3人,获得15.8元红包</div>
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>
      <div class="content">
        <div class="content_title">每邀请 <span style="color:#F45434">1位新用户</span>赚</div>
        <div class="content_price">
          <span>{{invite_register_price}}</span><span class="content_company">元</span>
        </div>
        <div class="content_img"><img class="content_imgs" src="../../../assets/images/ktx.png" alt=""></div>
      </div>
      <div class="button" @click="invitation">立即邀请</div>
      <div class="balance">
        <div class="balance_wallet">
          <span>钱包余额：</span>
          <span>￥{{price}}</span>
        </div>
        <div class="balance_detailed">
          <span @click="detailed('/member/RedEnvelopes/envelopes')">查看明细</span>
          <span><img class="balance_detailed_img" src="../../../assets/images/fanhui.png" alt=""></span>
        </div>
      </div>
      <div class="bottom" style="height:100%;">
        <div class="wrapper">
          <div class="strategy">
            <div class="switch">
              <div @click="strategys" :class="strategy_class">赚钱攻略</div>
              <div @click="records" :class="record_class">邀请记录</div>
            </div>
          </div>
          <div class="content-text" v-if="strategy">
            <div class="reward_tips">每邀请1人，可得现金奖励如下</div>
            <div class="step">
              <div class="step_one">注册</div>
              <div class="step_two">完善</div>
              <div class="step_three">奖励<br/> {{invite_register_price}}元</div>
            </div>
            <div class="strip">
              <img class="strip_img" src="../../../assets/images/xt.png" alt="">
            </div>
            <div class="step_content">
              <div class="step_content_one">新用户注册</div>
              <div class="step_content_two">完善并通过审核</div>
              <div class="step_content_three">获得现金红包</div>
            </div>
            <div class="bottiom_content">
              <p style="color:#525050">邀请谁可获得奖励？</p>
              <p style="color:#757575">活动期间分享活动发起邀请，邀请对象必须为新用户。邀请对象接受邀请后，在平台注册完善信息之后，邀请人可以获得</p>
              <p style="color:#757575">好友需扫您的二维码接受邀请，即启动该任务。</p>
              <p style="color:#525050;margin-top: 20px;">新人有什么福利吗？</p>
              <p style="color:#757575">新人扫码注册完善信息后，可获得专属现金奖励。</p>
            </div>
          </div>
          <div  v-if="record">
            <div class="notyet" v-if="list.length <= 0">
              <img class="notyet_img" src="../../../assets/images/nodata.png" alt="">
              <p>暂无记录</p>
            </div>
            <van-list
              v-if="list.length > 0"
              v-model="loading"
              :finished="finished"
              :finished-text="finished_text"
              @load="onLoad"
              :immediate-check="true"
            >
              <div class="list-wrapper">
                <div class="list_content" v-for="(item,index) in list" :key="index">
                  <div class="list_content_title">
                    <div class="list_content_titles">{{item.username}}</div>
                    <div class="list_content_title_time">邀请时间：{{item.addtime | timeFilter}}</div>
                  </div>
                  <div class="list_content_money" v-if="item.state == 1" style="color:#86CD6D">{{item.state_msg}}</div>
                  <div class="list_content_money" v-if="item.state == 0">{{item.state_msg}}</div>
                  <div class="list_content_money" v-if="item.state == 2" style="color:red">邀请失败</div>
                </div>
              </div>

            </van-list>
          </div>
        </div>


      </div>
      <van-popup style="width:80%;background-color: rgba(0,0,0,0);" v-model:show="dialogVisible">
        <img style="width:100%" :src="share_background" alt="">
        <span class="save" @click="save()">长按保存图片</span>
        <span class="close" @click="close()">关闭</span>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { parseTime } from '@/utils/index'
import http from '@/utils/http'
import api from '@/api'
import Vue from 'vue';
import { Dialog } from 'vant';
export default {
  name: "Invitation",
  filters: {
    timeFilter (timestamp) {
      return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
    }
  },
  data () {
    return {
      'loading': false,
      'finished': false,
      'finished_text': '',
      'dialogVisible':false,
      'share_background':'',
      'list':[],
      'price':0,
      'invite_register_price':0,
      'strategy':true,
      'record':false,
      'strategy_class':'strategy_switch auto',
      'record_class':'strategy_switch',
      'params': {
        'page': 1,
        'pagesize': 10
      }
    }
  },
  created(){

    this.initInfo()
  },
  methods: {
    initInfo () {
      http.get(api.envelopes, {})
        .then(res => {
          if(res.data.invite_register_is_open == 0){
            Dialog.alert({
              title: '活动已结束',
              message: '<div><img src="'+res.data.wechat_qrcode+'" alt=""></div>扫码关注公众<br />及时获取更多信息',
            }).then(() => {
              this.$router.push('/member/personal/index')
            });
          }
          this.price = res.data.money
          this.invite_register_price = res.data.invite_register_price
        })
        .catch(() => {})
    },
    strategys(){
      this.strategy = true
      this.record = false
      this.strategy_class = 'strategy_switch auto'
      this.record_class = 'strategy_switch'
    },
    records(){
      this.strategy = false
      this.record = true
      this.strategy_class = 'strategy_switch'
      this.record_class = 'strategy_switch auto'
      this.invitationRecord(true)
    },
    close(){
      this.dialogVisible = false
    },
    invitationRecord(init){
      if (init === true) {
        this.params.page = 1
        this.finished_text = ''
        this.finished = false
      }
      http.get(api.invitationRecord,this.params)
        .then(res => {
          if (init === true) {
            this.show_empty = false
            this.list = [...res.data]
          } else {
            this.list = this.list.concat(res.data)
          }
          this.loading = false
          // 数据全部加载完成
          if (res.data.length < this.params.pagesize) {
            this.finished = true
            if (init === false) {
              this.finished_text = '没有更多了'
            } else if (res.data.length == 0) {
              this.show_empty = true
            }
          }
        })
        .catch(() => {})
    },
    save(){
      this.$toast('请长按海报图片保存到相册')
    },
    invitation(){
      http.get(api.share_red_envelope).then((res)=>{
        this.share_background = res.data
        this.dialogVisible = true
      })
    },
    onLoad () {
      this.params.page++
      this.invitationRecord(false)
    },
    detailed(path){
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>
.bakcground{
  width:100%;
  padding-top: 14px;
  background-image:url('../../../assets/images/bj.png');
  background-color: #F7F7F7;
  background-repeat:no-repeat;
  background-position:top;
  background-size:100%;
}
.save{
  width: 3.88rem;
  height: 1.093333rem;
  text-align: center;
  line-height: 1.093333rem;
  color: #fff;
  font-size: 0.373333rem;
  border-radius: 0.133333rem;
  background-color: #1787fb;
  float:left
}
.close{
  width: 3.88rem;
  height: 1.093333rem;
  text-align: center;
  line-height: 1.093333rem;
  color: #fff;
  font-size: 0.373333rem;
  border-radius: 0.133333rem;
  background-color: #00d77e;
  float:right
}
.list-wrapper{
  background-color: #fff;
}
.list_content{
  width:90%;
  height:70px;
  border-bottom: 1px solid #F0F0F0;
  margin-left: 20px;
  margin-right: 20px;
}
.list_content_title{
  color:#282828;
  font-size:14px;
  float: left;
  margin-top:15px;
}
.list_content_money{
  float: right;
  margin-top:22px;
  color:#FE7E28;
  font-weight: 500;
  font-size:14px;
}
.list_content_title_time{
  margin-top:7px;
  color:#999999;
  font-size:12px;
}
.list_content_titles{
  font-weight: 500;
  font-family: PingFang SC;
}
.list_content_state{
  width:100%;
  display: inline;
  margin-left: 31px;
  margin-top:5px;
  height:100%;
}
.notyet_img{
  width:157px;
  height:157px;
}
.notyet{
  padding:68px 0 120px ;
  text-align: center;
  color: #414141;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  background: #fff;
}
.auto{
  color: #F88C44;
}
.auto:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  margin: auto;
  width: 21px;
  height: 2px;
  background: #F88C44;
  border-radius: 2px;
}
.content_imgs{
  width: 61px;
  height: 20px;
}
.content_img{
  display: inline;
  position:absolute;
  top: 50px;
  right: 60px;
}
.bottiom_content{
  padding: 13px 13px;
  line-height: 20px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #525050;
  width:300px;
  margin-top:12px;
  margin-left: 18px;
  background: #FFFBF3;
  border-radius: 5px;
}
.step_content_one{
  font-size: 12px;
  margin-left: 32px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #8D8D8D;
  line-height: 12px;
  float:left;
}
.step_content_two{
  margin-left: 35px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #8D8D8D;
  line-height: 12px;
  float:left;
}
.step_content_three{
  margin-left: 27px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #8D8D8D;
  line-height: 12px;
  float:left;
}
.step_content{
  height: 15px;
  width:100%;
}
.strip_img{
  width:234px;
  height:14px;
  display: block;
  margin: 0 auto;
}
.strip{
  /*width:100%;*/
  padding: 10px;
  height:100%;
  /*margin-left:52px;*/
}
.step{
  height:54px;
}
.step_one{
  float: left;
  height:54px;
  margin-left: 40px;
  padding: 14px 10px 29px 10px;
  font-size: 12px;
  background-image: url("../../../assets/images/step.png");
  background-repeat:no-repeat;
  background-position:top;
  background-size:100%;
  font-family: PingFang SC;
  font-weight: bold;
  color: #F8482C;
}
.step_two{
  float: left;
  height:54px;
  font-size: 12px;
  margin-left: 63px;
  padding: 14px 10px 29px 10px;
  background-image: url("../../../assets/images/step.png");
  background-repeat:no-repeat;
  background-position:top;
  background-size:100%;
  font-family: PingFang SC;
  font-weight: bold;
  color: #F8482C;
}
.step_three{
  float: left;
  height:55px;
  font-size: 10px;
  margin-left: 63px;
  text-align: center;
  padding: 7px 10px 21px 10px;
  background-image: url("../../../assets/images/hongbao.png");
  background-repeat:no-repeat;
  background-position:top;
  background-size:100%;
  font-family: PingFang SC;
  color: #FFFAF0;
}
#app{
  background-color: #F7F7F7;
  height:100vh;
}
.notice-bar{
  margin-left: 14px;
  padding: 0px 5px;
  width:213px;
  background: linear-gradient(118deg, #E84D38 39%, #FEC171 100%);
  background: #000000;
  height: 25px;
  border: 1px solid #FDC370;
  opacity: 0.2;
  line-height: 25px;
  border-radius: 25px;
}
.notice{
  font-size: 11px;
  color: #F6E4E1;
  height: 25px;
}
.content{
  position: relative;
  width:317px;
  margin-top:116px;
  margin-left: 19px;
  font-size: 14px;
}
.content_title{
  font-weight: bold;
  text-align:center;
  padding-top:22px;
  font-size: 14px;
}
.content_price{
  text-align:center;
  font-size:60px;
  color:#F45334;
  font-weight: 800;
}
.content_company{
  font-size:14px;
  margin-left: 6px;
  font-weight: 800;
}
.button{
  width:191px;
  height:52px;
  background:url("../../../assets/images/an.png");
  background-repeat:no-repeat;
  background-position:top;
  background-size:100%;
  margin:5px auto;
  font-size:19px;
  text-align: center;
  font-family: PingFang SC;
  font-weight: bold;
  color: #993122;
  line-height: 52px;
}
.balance{
  wdith:335px;
  height:47px;
  margin:15px 20px;
  background: #FFFFFF;
  border-radius: 5px;
}
.balance_wallet{
  float:left;
  font-size:15px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #373737;
  line-height:47px;
  margin-left: 16px;
}

.balance_detailed{
  float:right;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #F88C44;
  line-height:47px;
}
.balance_detailed_img{
  width:5px;
  height: 7px;
  margin-left: 5px;
  margin-right: 11px;
}
.bottom{
  background: #F7F7F7;
  padding-bottom:14px;
  border-radius: 0px 0px 5px 5px;
  padding-right: 20px;
  padding-left: 20px;
}
.wrapper{
  min-height: 400px;
  background: #fff;
}
.strategy{
  width:335px;
  background: #fff;
  border-bottom:1px solid #F0F0F0;
}
.content-text{
  background: #fff;
  padding:21px 0 ;
}
.switch{
  width:100%;
  color: #242424;
  height:44px;
}
.strategy_switch{
  float:left;
  position: relative;
  width:165px;
  text-align: center;
  line-height: 44px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
}
.reward_tips{
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #393939;
  padding: 0 0 13px 16px;
}
</style>
